.control {
  position: absolute;

  > .tile {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    background-color: $light;

    margin: .02rem;
    width: calc(100% - .05rem);
    height: calc(100% - .05rem);

    border: 1px solid rgba($dark, .4);
    box-shadow:
      inset -.1rem -.1rem .1rem rgba($dark, .3),
      .2rem .2rem .6rem rgba($dark, .5);

    > .control-parameters {
      position: absolute;
      right: .2rem;
      top: .2rem;
      font-size: 1rem;
      height: 1rem;
      width: 1rem;
      color: rgba($dark, .2);
      background: none;
      border: 0;
      padding: 0;
      margin: 0;

      svg {
        vertical-align: top;
      }

      &:hover {
        color: $dark;
      }
    }

    > .control-display {
      height: calc(1ex - 2rem);
      width: calc(1ex - 2rem);
      position: relative;
      overflow: hidden;
    }
  }

  &.has-error {
    > .tile {
      background-color: $red;
    }
  }

  @import './controls/titl';
  @import './controls/distance';
  @import './controls/slider';
  @import './controls/arrows';
}

.modal-content {
  min-width: 30vw;
  max-height: 70vw;
  overflow-y: auto;

  &.control-add {
    max-width: 70vw;

    .modal-body {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;

      > button {
        padding: 0;
        border: 0;
        background: none;

        .control {
          margin: .5rem;

          .tile {
            .pin {
              position: absolute;
              @include pin;

              &:before {
                box-shadow:
                  inset -.02em -.02em .02em rgba($dark, .5),
                  .02em .02em .1em rgba($dark, .5);
              }
            }
          }
        }
      }
    }

    .control {
      position: relative;
    }
  }
}
